import React from 'react';
import window from '../../util';
import loadjs from 'loadjs';
import _ from 'lodash';
import {toJS} from 'mobx';

export interface MapPicProps {
    address: string;
}
export default class MapPic extends React.Component<MapPicProps, any> {
    map: any;
    marker: any;
    componentDidMount() {
        if ( !window.AMap ) {
            if(!loadjs.isDefined('mapjs')){
                loadjs(["https://webapi.amap.com/maps?v=1.4.4&key=53a92850ca00d7f77aef3297effd8d59&plugin=AMap.Geocoder"], 'mapjs', {
                    success: () => {
                        this.initMapPic();
                    }
                });
            }
        }else {
            this.initMapPic();
        } 
    }
    componentWillReceiveProps(nextProps: MapPicProps) {
        if (!_.isEqual(toJS(this.props.address), toJS(nextProps.address))) {
           this.marker && this.map.remove(this.marker);
           this.map &&  this.initMapPic();
        }
    }

    initMapPic = () => {
        const that = this;
        if(window.AMap){
            if (!this.map) {
                this.map = new window.AMap.Map(this.refs._map, {
                    resizeEnable: true,
                });
            }
            this.map.on('click', (e) => {
                this.regeocoder([e.lnglat.getLng(), e.lnglat.getLat()])
            });
            this.geocoder(this.props.address);
        }else{
            setTimeout(() => {
                that.initMapPic();
            }, 50);
        }
        
    }

    regeocoder = (lnglatXY) => {
        const that = this;
        window.AMap.plugin(['AMap.Geocoder'], function () {
            let geocoder = new window.AMap.Geocoder({
                radius: 1000,
                extensions: "all"
            });
            //已知地理坐标，逆地理编码   
            geocoder.getAddress(lnglatXY, (status, result) => {
                if (status === 'complete' && result.info === 'OK') {
                    that.reGeocoder_CallBack(lnglatXY, result);
                }
            });
        });
    }
    geocoder_CallBack = (data) => {
        //地理编码结果数组
        var geocode = data.geocodes;
        for (let i = 0; i < geocode.length; i++) {
            const position = [geocode[i].location.getLng(), geocode[i].location.getLat()];
            this.addMarker(i, position, geocode[i].formattedAddress);
        }
        this.map.setFitView();
    }
    reGeocoder_CallBack = (lnglatXY, data) => {
        this.addMarker("e", lnglatXY, data.regeocode.formattedAddress);
    }
    addMarker = (_, p, address) => {
        const that = this;
        if(window.AMap.Marker){
            that.addMarkerAfter(_, p, address);
        }else{
            window.AMap.plugin(['AMap.Marker'],function(){
                that.addMarkerAfter(_, p, address);
            });
        }
    }
    addMarkerAfter=(_, p, address)=>{
        if (this.marker) {
            this.map.remove(this.marker);
        }
        this.marker = new window.AMap.Marker({
            map: this.map,
            position: p
        });
        let infoWindow = new window.AMap.InfoWindow({
            content: address,
            offset: { x: 0, y: -30 }
        });
        infoWindow.open(this.map, this.marker.getPosition());
        this.marker.on("mouseover", (_) => {
            infoWindow.open(this.map, this.marker.getPosition());
        });
    }
    geocoder = (title) => {
        const that = this;
        if(window.AMap.Geocoder){
            that.geocoderAfter(title);
        }else{
            window.AMap.plugin(['AMap.Geocoder'],function(){
                that.geocoderAfter(title);
             })
        }
    }
    geocoderAfter = (title)=>{
        var geocoder = new window.AMap.Geocoder({
            radius: 1000 //范围，默认：500
        });
        //地理编码,返回地理编码结果
        geocoder.getLocation(title, (status, result) => {
            if (status === 'complete' && result.info === 'OK') {
                this.map.remove(this.marker || "");
                this.geocoder_CallBack(result);
            }
        });
    }
    render() {
        return (
            <div ref="_map" style={{ minHeight: 200 }}></div>
        );
    }
}